<template>
  <div className="mod-config">

    <!--      style="height: 1000px; padding: 10px;display: flex;align-items: center;justify-content: center;" -->
    <div ref="chart1"
         style="height: 800px; padding: 10px;display: flex;align-items: center;justify-content: center;"></div>
    <!--        <img width="50%" height="50%" src="./yaocaichandiTu.jpg">-->

  </div>


</template>

<script>

import * as echarts from 'echarts'

export default {
  data() {
    return {
      chanLiangList: [],
      zengSuList: [],
    }
  },

  activated() {
    this.getData()
  },
  mounted() {

    // this.getData()
  },
  methods: {
    getData() {
      this.chanLiangList = [],
        this.zengSuList = []
      for (let i = 0; i < 7; i++) {
        this.chanLiangList.push(this.generate_rand_num(70, 600))
        this.zengSuList.push(this.generate_rand_num(1, 11))
      }

      if (this.chanLiangList && this.zengSuList) {
        this.initCharts()
      }

    },

    generate_rand_num(min_v, max_v) {
      //min_v下限，max_v上限
      var rand_num = parseFloat(Math.random() * (max_v - min_v + 1) + min_v);
      var a = rand_num.toFixed(1)
      return a
    },
    initCharts() {
      const chart = echarts.init(this.$refs.chart1);
      const option = {
        // 设置图表的位置
        grid: {
          x: 100, // 左间距
          y: 100, // 上间距
          x2: 100, // 右间距
          y2: 50, // 下间距
        },
        title: {
          text: '2017年-2023年中药材产量及增速趋势',   //设置我们的标题
          left: 'center',
          textStyle: {
            fontSize: 20,// 设置标题字体大小为20
            left: 'center'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: ['产量(万吨)', '增速(%)'],
          // data: ['产量（万吨）', '增速（%）','dddd']
          orient: 'horizontal',
          right: 10,
          // top: 'center',
          padding: [50, 100, 0, 0],
          // x:'right', //可设定图例在左、右、居中
          // y:'center', //可设定图例在上、下、居中
          textStyle: {
            fontSize: 16 // 文本字体大小
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
            axisPointer: {
              type: 'shadow'
            },

            axisLabel: {
              // 默认x轴字体大小
              fontSize: 16,
              fontWeight: 'bold'
              /*   interval: 0,
                 // 设置文字倾斜显示
                 rotate: -60,
                 color: "#fff",
                 // margin:文字到x轴的距离
                 margin: 5,*/
            }

          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '产量(万吨)',
            min: 0,
            max: 600,
            interval: 100,
            axisLabel: {
              formatter: '{value} 万吨'
            }
          },
          {
            type: 'value',
            name: '增速(%)',
            min: 0,
            max: 12,
            interval: 2,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '产量(万吨)',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            itemStyle: {
              color: '#7d95c7'
            },
            data: this.chanLiangList
          },

          {
            name: '增速(%)',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: 'green',
                width: 20,
              },
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: this.zengSuList
          }
        ]
      };

      chart.setOption(option);
    }
  }
}
</script>
<style>
</style>
